<template>
  <div>
    <Card>
      <Form ref="formInline" :model="formInline"  inline>
        <FormItem prop="user">
            <Input type="text" v-model="formInline.id" placeholder="主播ID" />
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="formInline.nickname" placeholder="主播手机号" />
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="formInline.mobile" placeholder="用户ID" />
        </FormItem>
        <FormItem prop="password">
            <DatePicker type="datetime" placeholder="视频开始时间" style="width: 200px"></DatePicker>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')">查询</Button>
        </FormItem>
    </Form>
      <tables ref="tables" editable :pageNum="pageNum" :listTotal="listTotal"   v-model="tableData" :columns="columns" @on-delete="handleDelete"/>
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { getTableData } from '@/api/data'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        {title: 'ID', key: 'id'},
        {title: '发起者', key: 'avatar'},
        {title: '发起渠道', key: 'nickname'},
        {title: '主播信息', key: 'nickname'},
        {title: '用户信息', key: 'nickname'},
        {title: '时长', key: 'nickname'},
        {title: '发起时间', key: 'nickname'},
        {title: '接通时间', key: 'nickname'},
        {
          title: '操作',
          key: 'handle',
          fixed: 'right',
          width: 150,
          button: [
            (h, params, vm) => {
              return h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  'click': () => alert('查看视频')
                }
              }, '查看')
            }
          ]
        }
      ],
      tableData: [],
      pageNum: 1,
      listTotal: 5,
      formInline: {
        id: '',
        nickname: '',
        mobile: '',
        type: '',
        status: ''
      }
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    createAnchor () {
      this.$router.push('/anchor/create')
    }
  },
  mounted () {
    getTableData().then(res => {
      this.tableData = [{
        id: 1, avatar: '测试', nickname: '测试'
      }]// res.data
    })
  }
}
</script>

<style>

</style>
